在過去六天的學習中，我們完成了從資料庫設計到前端互動的完整流程，打造了一個可執行 CRUD 的留言板 API。以下整理重點：

1. 資料庫 (DynamoDB) 設定

這週建立了一個 DynamoDB 資料表 Messages，包含欄位：

• id (Primary Key)
• message (留言內容)
  這個資料表負責存放所有使用者的留言資料。DynamoDB 是無伺服器 (serverless) 的資料庫，無需管理伺服器。

2. Lambda 函式

使用 AWS Lambda 作為伺服器端邏輯：

1. 連接 DynamoDB
2. 實現 CRUD 操作 (Create, Read, Update, Delete)
3. 回傳 JSON 格式給前端
4. Lambda 角色需設定 IAM 權限，允許對 DynamoDB 資料表執行操作

在程式中加入 CORS 支援，允許前端網頁跨來源呼叫 Lambda API：

"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type"

3. API Gateway

建立 REST API，把 Lambda 函式暴露為可被 HTTP 呼叫的端點：
設定路徑 /MessagesHandler，並建立四種方法：

1. POST → 新增留言
2. GET → 查詢留言
3. PUT → 更新留言
4. DELETE → 刪除留言
   支援 OPTIONS 方法，處理 CORS preflight 請求
   部署到 stage，例如 prod，產生對外網址：https://xxx.amazonaws.com/prod/MessagesHandler

4. 前端 HTML 頁面

使用簡單的 HTML + JavaScript 建立測試介面：

• <input> 取得使用者輸入的 ID 與 Message
• <button> 綁定函式觸發 CRUD

JavaScript 使用 fetch API 與 Lambda REST API 互動：

• POST / PUT ：將資料放在 body
• GET / DELETE：將 id 放在 query string

顯示結果在 <div id="output"> 上

整個流程：
使用者輸入 → 點擊按鈕 → fetch → Lambda → DynamoDB → 回傳 JSON → 顯示在頁面

5. CORS 與前端測試

由於前端頁面和 API 不在同一個來源，需設定 CORS：

• Lambda 回傳 header Access-Control-Allow-Origin: *
• API Gateway OPTIONS 方法支援 preflight
• 在本機用瀏覽器開啟 index.html 測試 CRUD 功能
• 我本身用Mac，所以用 python -m http.server 8000 啟動本地伺服器，避免 file:// 原因造成 CORS 問題

6. 這個系統的應用

透過 Lambda + DynamoDB + API Gateway，建立了 無伺服器的留言板 API

• 可作為前端網頁、行動 App 或其他系統的後端服務
• 使用者輸入的資料可以即時存入資料庫並回傳結果
• 具備完整的 CRUD 功能，並可擴充更多功能，如驗證、排序、分頁等

總結重點

• 資料庫：存放資料
• Lambda：處理邏輯與 CRUD
• API Gateway：對外提供 HTTP 介面
• 前端 HTML/JS：提供使用者操作介面
• CORS：解決跨域問題

整個流程連貫起來，就是一個完整的無伺服器留言板系統：使用者在網頁輸入 → Lambda 處理 → DynamoDB 存取 → 回傳 → 顯示在網頁上。

那麼明天開始我們要正式進入實作出小系統的部分啦！